<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
<!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="title" -->
<title>微笑墙</title>

<link rel="stylesheet" type="text/css" href="../css/index.css">
<link rel="shortcut icon" type="text/css" href="../images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/simle_index.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/simle_index.js"></script>
<script>
	$(function(){
		var sid=$("#smile_sid").val();
		getDateInfo({sid:sid,"userComment.min":1,"userComment.max":5});
	});

	function getDateInfo(obj){
		$.post("../json/smileAction_detailSmile",obj,function(data){
			var str="";
			//获取图片详细信息
			$.each(data.rows,function(index,item){
				str='<div class="smile-index_content_left_top"><h1>'+item.sname+'</h1></div>';
		        str+='<div class="smile-index_content_left_center"><div class="smile-index_content_left_center_img">';
		        str+='<img class="sidtu" src="../'+item.saddr+'" id="'+item.sid+'"/></div></div>';
		        str+='<div class="smile-index_content_desc"><p>'+item.sdec+'</p></div>';
		        str+='<div class="smile-index_content_date"><ul><li>'+item.stime+'</li></ul></div>';
			});
				
			$("#smile_imgInfo").html("");
			$("#smile_imgInfo").html( $(str));
				
			/*--------------------------------------------------*/
				
			var obj=data.obj;  //取上传图片的作者
			var str1="";
			var str2="";
							
			str1+='<p class="smile-index_pbox">';
			if( obj.upic==null || obj.upic==""){
				str1+='<a href=""><img width="80" height="80" src="../images/userlogin.jpg"></a>';
			}else{
				str1+='<a href=""><img width="80" height="80" src="'+obj.upic+'"></a></p>';
			}
				str1+='<a href="" style="margin-left:10px">'+obj.uname+'</a><a class="look"  style="margin-left:10px" href="">去我的巴别塔看看</a>';
							
			$(".smile-index_content_right_face").html("");
			$(".smile-index_content_right_face").html( $(str1 ));
							
			/*--------------------------------------------------*/
							
			//取评论的信息
			var str2="";
			$.each(data.comment,function(index,item){
			str2+='<ul><li class="smile-index_id_content_1">';
			if(item.userPhoto==null || item.userPhoto==""){
				str2+='<p class="smile-index_photo"><img width="40" height="40" src="../images/userlogin.jpg" /></p>';
			}else {
				str2+='<p class="smile-index_photo"><img width="40" height="40" src="'+item.userPhoto+'" /></p>';
			}	
			    str2+='<a href="#">'+item.temp+'</a> ：'+item.ccontent+'<br /><span class="smile_date">'+item.ctime+'</span></ul>';            			
			});
			$(".smile-index_content_message_list").html( $(str2));
							
			/*--------------------------------------------------*/
							
			//取分页信息
			var page=data.object;
			$("#spage").html(page.pageNo);
			$("#spagetotal").html(page.totalPage);
			
			//取作者的其他作品的信息
			var str3="";
			$.each(data.info,function(index,item){
				str3+='<li><p class="smile-index_pbox"><a href=""><img width="40" height="40" src="../'+item.saddr+'"></a>';
				str3+='</p> <a href="">'+item.sname+'</li></a> <br>';
			});
			
			$(".smile-index_content_right_authorother ul").html( $(str3 ));
			
		},"json");
	}
		

	//点击下一页
	function page(pageNo){
		var objid=$(".smile-index_content_left_center_img img").attr("id");//获取图片id
		$.post("../json/smileAction_pageComment",{page:pageNo,sid:objid},function(data){
			//取评论的信息
			var str2="";
			$.each(data.comment,function(index,item){
			str2+='<ul><li class="smile-index_id_content_1">';
			if(item.userPhoto==null || item.userPhoto==""){
				str2+='<p class="smile-index_photo"><img width="40" height="40" src="../images/userlogin.jpg" /></p>';
			}else {
				str2+='<p class="smile-index_photo"><img width="40" height="40" src="'+item.userPhoto+'" /></p>';
			}	
			    str2+='<a href="#">'+item.temp+'</a> ：'+item.ccontent+'<br /><span class="smile_date">'+item.ctime+'</span></ul>';            			
			});
			$(".smile-index_content_message_list").html( $(str2));
			
			//取分页信息
			var page=data.object;
			$("#spage").html(page.pageNo);
			$("#spagetotal").html(page.totalPage);
		},"json");
	}
	
	/*点击回复*/
	function s_submit(){
		var w_uid=$("#smile_w_uid").val();
		var ccontent=$("#smile-index_content_form_msg").val();
		$("#smile-index_content_form_msg").val("");  //清空文本内容
		$("#sindex_info").html(200);
		
		var date=new Date();
		var h = date.getHours();   //小时
		var m = date.getMinutes().toString();   //分
		var time=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+h+":"+m;
		
		var objid=$(".smile-index_content_left_center_img img").attr("id");//获取图片id
		$.post("../json/smileAction_addComment",{"userComment.w_uid":w_uid,"userComment.area_id":3,"userComment.ccontent":ccontent,"userComment.objid":objid,"userComment.ctime":time,"userComment.min":1,"userComment.max":5},function(data){
			var str="";
			$.each(data.rows,function(index,item){
				str+='<ul><li class="smile-index_id_content_1">';
				if(item.userPhoto==null || item.userPhoto==""){
					str+='<p class="smile-index_photo"><img width="40" height="40" src="../images/userlogin.jpg" /></p>';
				}else {
					str+='<p class="smile-index_photo"><img width="40" height="40" src="'+item.userPhoto+'" /></p>';
				}	
            		str+='<a href="#">'+item.temp+'</a> ：'+item.ccontent+'<br /><span class="smile_date">'+item.ctime+'</span></ul>';            			
			});
			
			$(".smile-index_content_message_list").html( $(str));
			
			//取分页信息
			$("#spagetotal").html(data.obj);
		},"json");
	}
	
</script>
<!-- InstanceEndEditable -->
</head>

<body>
	<!--头部开始-->
	<div class="header">
		<div class="logo">
			<a href="../index.html"><img src="../images/logo.png"></a>
		</div>
		<div class="nav">
			<ul>
				<li><a href="../index.jsp" class="tit">首页</a></li>
				<li><a href="../FM/FM.jsp" class="tit">心理FM</a></li>
				<li><a href="../moods/moods.jsp" class="tit">心情说</a></li>
				<li><a href="../article/article.jsp" class="tit">杂志</a></li>
				<li><a href="../test/test.jsp" class="tit">测试</a></li>
				<li><a href="smile.jsp" class="tit">微笑墙</a></li>
			</ul>
		</div>
		<div class="reg">
			<ul>
				<c:if test="${empty sessionScope.currentUser}">
					<li><a href="../login/login.html" id="login_logo">登录</a></li>
					<li><span class="line"></span></li>
					<li><a href="../reg/reg.html" id="reg_logo">注册</a></li>
				</c:if>
				<c:if test="${!empty sessionScope.currentUser}">
					<li id="myli"><span>欢迎您</span>[<a
						href="userServlet?op=getPerInfo"
						style="color: yellow; font-size: 12px;" id="user_email">${sessionScope.currentUser.w_email}</a>]
						<span id="myspan"></span>
						<div id="current_userInfo">
							<dl>
								<dd>
									<a href="#">个人中心</a>
								</dd>
								<dd>
									<a href="#">发表说说</a>
								</dd>
								<dd>
									<a href="#">我的通知</a>
								</dd>
								<dd>
									<a href="exit.jsp">退&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出</a>
								</dd>
							</dl>
						</div></li>
				</c:if>
			</ul>
		</div>
		<div class="sear">
			<form target="_blank" action="" method="get">
				<input type="text" class="text" name="sear" placeholder="搜索" /> <input
					type="submit" class="submit" value="&#10140;" />
			</form>
		</div>
	</div>
	<!--头部结束-->
	<!-- InstanceBeginEditable name="content" -->
	<input id="smile_sid" type="hidden" value="${sid }" />
	<input id="smile_w_uid" type="hidden" value="${sessionScope.currentUser.w_uid }" />
	<div class="smile-index_content">
		<div class="smile-index_content_left" id="smile-index_content_left">
			<div id="smile_imgInfo">
				<div class="smile-index_content_left_top">
					<h1>图片名称</h1>
				</div>

				<div class="smile-index_content_left_center">
					<div class="smile-index_content_left_center_img">
						<!--  <img class="sidtu" src="../${smile.SADDR }" id="${smile.SID }"/>-->
					</div>
				</div>

				<div class="smile-index_content_desc">
					<p>图片描述</p>
				</div>

				<div class="smile-index_content_date">
					<ul>
						<li>上传时间</li>
						<!-- <li class="s_zan_tu"></li>
                     <li id="sindex_zan" class="smile-index_content_date_zan">点赞(<span>0</span>)</li>-->
					</ul>
				</div>
			</div>
			<div class="smile-index_content_message">
				<h1>留言</h1>
				<span id="smile_totalComment"></span>
				<div class="smile-index_content_message_list">
					<!-- 	<ul>
                			<li class="smile-index_id_content_1">
	                			<p class="smile-index_photo"><img width="40" height="40" src="../images/logo.png" /></p>
								<a href="#">xxx</a> ：nihao<br /><span class="smile_date">2016-6-2</span>
							</li>
                	</ul> -->
				</div>

				<div class="smile_content_content_bottom">
					<p>
						<a href="javascript:page(1)"><span>上一页&nbsp;&nbsp;</span></a> 
						<span id="spage">1</span> 
						<a href="javascript:page(2)">
						<span>&nbsp;&nbsp;下一页&nbsp;&nbsp;</span></a>
						共&nbsp;&nbsp;<span id="spagetotal">5 </span>&nbsp;&nbsp;页
					</p>
				</div>

			</div>

			<div class="smile-index_content_form">
				<form action="" method="post">
					<textarea id="smile-index_content_form_msg" class="txt" name="msg"
						maxlength="200" onKeyUp="checkInfo()"></textarea>

					<div class="smile-index_content_btn">
						还可以输入<span id="sindex_info">200</span>个字符 <input
							class="smile-index_content_btn_submit" type="button"
							onClick="s_submit()" value="评论">
					</div>
				</form>
			</div>
		</div>

		<div class="smile-index_content_right">
			<h2>作者</h2>
			<div class="smile-index_content_right_face">
				<p class="smile-index_pbox">
					<a href=""><img width="80" height="80"
						src="../images/userlogin.jpg"></a>
				</p>

				<a href="">xxx</a><br> <a class="look" href="">去我的巴别塔看看</a>
			</div>

			<div class="smile-index_content_right_authorother">
				<h2 class="smile-index_st">其它作品</h2>
				<ul>
						<li>
							<p class="smile-index_pbox">
								<a href=""><img width="50" height="50" src="../images/userlogin.jpg"></a>
							</p> 
							<a href="">哈哈哈</a> <br>  
	                        <!--<span class="smile-index_authorother_msgs">0</span>
	                         <span class="smile-index_authorother_fav">50</span>-->
						</li>
					
				</ul>
			</div>
		</div>
	</div>

	<!-- InstanceEndEditable -->
	<!--内容部分结束-->
	<div id="footer">
		<div id="footer_content">
			<div id="nav">
				<ul>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">加入我们</a></li>
					<li><a href="#">联系我们</a></li>
					<li><a href="#">免责声明</a></li>
					<li><a href="#">友情链接</a></li>
					<li><a href="#">网站地图</a></li>
					<li><a href="#">手机版</a></li>
					<li><a href="#">手机应用</a></li>
					<li><a href="#" style="display: none">投稿</a></li>
				</ul>
			</div>
			<div id="links">
				<span>友情链接：</span>
				<ul>
					<li><a target="_blank" href="http://www.nlp.cn/">NLP心理学</a></li>
					<li><a target="_blank" href="http://zhidao.baidu.com/daily/">百度知道日报</a></li>
					<li><a target="_blank" href="http://iask.fh21.com.cn/">飞华问医生</a></li>
					<li><a target="_blank" href="http://www.dxsbb.com/">大学生网</a></li>
					<li><a target="_blank" href="http://yuwen.chazidian.com/">语文网</a></li>
					<li><a target="_blank" href="http://tag.120ask.com/">
							有问必答知识库</a></li>
					<li><a target="_blank" href="http://www.xinli001.com/zx/">心理咨询</a></li>
					<li><a target="_blank" href="http://wannianli.tianqi.com/">天气网</a></li>
					<li><a target="_blank" href="http://www.pm25.com/">绿色呼吸</a></li>
					<li><a target="_blank" href="http://www.vmovier.com/">V电影</a></li>
					<li><a target="_blank"
						href="http://iask.sina.com.cn/c/79.html ">爱问健康</a></li>
				</ul>
			</div>
			<div id="copyright">
				<div id="footer_1">
					&copy; 2015 All Rights Reserved. <a target="_blank"
						href="http://www.miibeian.gov.cn/">粤ICP备12051153号</a>
				</div>
				<div id="footer_2">
					<a href="#"> <img src="../images/footer_pic1.png"
						align="absmiddle" />
					</a> <a href="#"> <img src="../images/footer_pic2.png"
						align="absmiddle" />
					</a>
				</div>
			</div>
		</div>
	</div>
</body>
<!-- InstanceEnd -->
</html>
